<script setup>
import { ref } from 'vue';
const num = ref('1')
const active = ref(0);
</script>

<template>
  <div>
    <div>
      <div :class="num == 1 ? 'active' : ''" @click="num = 1">html</div>
      <div :class="num == 2 ? 'active' : ''" @click="num = 2">css</div>
      <div :class="num == 3 ? 'active' : ''" @click="num = 3">javascript</div>
      <!-- 根据num动态切换显示div内容 -->
      <div v-show="num == 1">html内容</div>
      <div v-show="num == 2">css内容</div>
      <div v-show="num == 3">javascript内容</div>
    </div>

    <div style="display: flex;justify-content: space-between;">
      <div style="width: 30%;border: 1px solid #000;">
        <van-sidebar v-model="active" style="width: 100%;">
          <van-sidebar-item title="标签名称1" />
          <van-sidebar-item title="标签名称2" />
          <van-sidebar-item title="标签名称3" />
        </van-sidebar>

      </div>
      <div style="width: 65%;border: 1px solid #000;">
        <div>
          <van-search placeholder="搜索花材/供应商" shape="round" />
        </div>
        <div>
          <div v-show="active == 0">html内容</div>
          <div v-show="active == 1">css内容</div>
          <div v-show="active == 2">javascript内容</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.active {
  color: firebrick;
}
</style>